<template>
  <div>
    <h1>{{ count }}---{{ count2 }}--{{ count3 }}</h1>
    <button @click="add">+</button>
    <button @click="changeCountAsync(count + 1)">++</button>
  </div>
</template>
<script>
// @ is an alias to /src
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'XXX',
  data() {
    return {

    }
  },
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['changeCountAsync'])
    // add2() {
    //   this.$store.dispatch('changeCountAsync', this.count + 1)
    // },
    // add() {
    //   // this.$store.state.count++
    //   // this.$store.commit('changeCount', this.count + 1)
    //   this.$store.commit({
    //     type: 'changeCount2',
    //     qqq: this.count + 1
    //   })
    // }
  },
  computed: {
    ...mapState(['count', 'count2', 'count3'])
    // count() {
    //   return this.$store.state.count
    // },
    // count2() {
    //   return this.$store.state.count2
    // },
    // count3() {
    //   return this.$store.state.count3
    // }
  }
}
</script>
<style lang="less">
</style>